<template>
  <view class="servepage">
    <view class="content">
    	<view class="serveitem" v-for="item in serveList" :key="item.id">
    		<view class="item-left">
    			<image class="itemimg" :src="item.image" mode=""></image>
				<view class="left-text">
					<view class="phonenum">
						{{item.name}}
					</view>
					<view class="text">
						服务
					</view>
				</view>
    		</view>
			<view class="item-right">
				<view class="right-price">
					￥{{item.price}}元
				</view>
				<view class="right-btn" @click="gotoServeDetail(item.id)">
					详情
				</view>
			</view>
    	</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        queryObj: {
          pageNo:1,
          pageSize:50
          
        },
        serveList:[],
        
      };
    },
	methods:{
    // 服务列表
    async getServeList() {
    const {data} =  await uni.$http.get('/service/page',this.queryObj)
    this.serveList = data.data.records
    },
		gotoServeDetail(id){
			uni.navigateTo({
				url:'/subpages/serve-detai/serve-detai?id=' + id
			})
		}
	},
  onLoad() {
    this.getServeList()
  }
  }
</script>

<style lang="scss" scoped>
	.servepage{
		width: 100%;
		height: 100%;
		padding: 0 1%;
		.content{
			margin-top: 10rpx;
			width: 98%;
			.serveitem{
				width: 94%;
				height: 300rpx;
				background: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				.item-left{
					width: 65%;
					display: flex;
					.itemimg{
						width: 210rpx;
						height: 210rpx;
					}
					.left-text{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						font-weight: 400;
						color: #000;
						.phonenum{
							font-size: 40rpx;	
						}
						.text{
							margin-top: 20rpx;
							font-size: 30rpx;
						}
					}
				}
				.item-right{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					.right-price{
						font-size: 35rpx;
						font-weight: 400;
						color: #000;
					}
					.right-btn{
						font-size: 30rpx;
						font-weight: 400;
						color: #fff;
						padding: 15rpx 50rpx;
						border-radius: 10rpx;
						background-color: #f63025;
						&:active{
							background-color: #d9443c;
						}
					}
				}
			}
		}
	}
</style>
